<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <select name="" id="province">
        <option value="请选择">请选择</option>
    </select>
     <select name="" id="city">
        <option value="请选择">请选择</option>
    </select>
    <select name="" id="area">
        <option value="请选择">请选择</option>
    </select>

    <script>

        // 请求数据的时候
        //    请求的地址
        //    请求的方式
        //    是否需要携带参数



        // 默认页面一打开就显示省份
        // 省份发生改变才会显示市
        // 市发生改变才会显示区


        // ajax 报错
        //   XMLHttpRequest  报错    ---  ajax流程有问题()
        //   404   路径
        //   JSON  接口是错的(php代码有错误)


        const oPro = document.querySelector('#province') ;
        const oCity = document.querySelector('#city') ;
        const oArea = document.querySelector('#area') ;

        ajax('../data/proData.json' , data => {
            console.log(data);
            // 显示所有的省份
            let proArr = data.list ;
            let html = '<option value="请选择">请选择</option>' ;
            proArr.forEach(({name}) => {
                html += `<option value="${name}">${name}</option>` ;
            })
            oPro.innerHTML = html ;


            // 数据请求成功以后，才有省份，有了省份才有选择  --- 事件写在ajax里面
            oPro.onchange = function() {
                // 省份发生改变以后  --- 区又可以选择了
                oArea.disabled = false ;
                const proVal = this.value ;
                // 判断
                if(proVal === '请选择') {
                    oCity.innerHTML = '<option value="请选择">请选择</option>' ;
                    oArea.innerHTML = '<option value="请选择">请选择</option>' ;
                    return ;
                }
                // 显示该省对应的市
                let cityArr = proArr.filter( v=> v.name === proVal)[0].list ;
                console.log(cityArr);
                let html = '<option value="请选择">请选择</option>' ;
                cityArr.forEach(({name}) => {
                    html += `<option value="${name}">${name}</option>` ;
                })
                oCity.innerHTML = html ;
                // 省份改变以后  --- 区变成请选择
                oArea.innerHTML = '<option value="请选择">请选择</option>' ;

                oCity.onchange = function() {
                    
                    const cityVal = this.value ;
                    // 判断
                    if(cityVal === '请选择') {
                        oArea.innerHTML = '<option value="请选择">请选择</option>' ;
                        return ;
                    }
                    // 显示该省对应的市
                    let areaArr = cityArr.filter( v=> v.name === cityVal)[0].list ;
                    console.log(areaArr);  // 直辖市后面没有list   undefined
                    if(areaArr) {
                        let html = '<option value="请选择">请选择</option>' ;
                        areaArr.forEach(({name}) => {
                            html += `<option value="${name}">${name}</option>` ;
                        })
                        oArea.innerHTML = html ;
                    } else {
                        oArea.disabled = true ;
                    }
                    

                    
                }
            }

        })


        





        

        function ajax(url , cb) {
            const xhr = new XMLHttpRequest() ;
            xhr.open('get' , url , true) ;
            xhr.send() ;
            xhr.onreadystatechange = function() {
                if(xhr.readyState === 4 && xhr.status === 200) {
                    let data = xhr.responseText ;
                    data = JSON.parse(data) ;
                    // console.log(data);
                    cb(data) ;
                }
            }
        }


    </script>
    
</body>
</html>